<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
            background-color: lightgray;
        }
        .cover{
            width: 398px;
            margin: 10px auto; 
            border: 5px solid orange;
            position: absolute;
            left :-3px;
            top:-13px;
               height: 450px;
              display: none;
        }
        .top{
            width: 400px;
            position: relative;
             margin: 20px auto; 
            background-color: white;
            /* border: 3px solid transparent; */
        }
        .top img{
            margin-left: calc(50% - 185px);
            margin-top: 15px;
        }
        .top>p{
            padding: 0 15px;
            font-size: 14px;
        }
        .bottom{
            width: 400px;
            margin: 20px auto;
            border: 5px solid transparent; 
            background-color: white;
            display: flex;
            transition: all 0.3s;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .bottom>li{
            position: relative;
            width: 170px;
            height: 170px;
            margin: 5px 5px;
            overflow: hidden;
        }
        .bottom>li>.ceng{
            position: absolute;
            width: 170px;
            height: 170px;
            background-color: rgba(0, 0, 0, 0.6);
            left: 0;
            top: 0;
            display: none;      
        }
        .bottom>li>.text{
            width: 170px;
            height: 170px;
            position: absolute;
            color:white;  
             padding: 0 10px; 
             left:-190px;
             top:0; 
              z-index: 10; 
        }
        
    </style>
</head>
<body>
    

    <div class="top">
         <div class="cover"></div>
        <img src="1.jpg" alt="">
        <p>[金熹]设计上运用了多片层叠设计[金熹]设计上运用了多片层叠设计</p>
    </div>
   
    <ul class="bottom">
        <li>
            <img src="2.jpg" alt="">
            <div class="ceng"></div>
            <div class="text">
                <p>special旗舰店</p>
                <span>最具传奇浪漫色彩的欧洲经典设计</span>
            </div>
        </li>
        <li>
            <img src="3.jpg" alt="">
            <div class="ceng"></div>
            <div class="text">
                <p>special旗舰店</p>
                <span>最具传奇浪漫色彩的欧洲经典设计</span>
            </div>
        </li>   
    </ul>

    <script src="jquery.js"></script>
</body>
</html>
<script>

      $('.top').hover(function(){
        $('.cover').stop().fadeIn(1000)
      },function(){
          $('.cover').stop().fadeOut(1000)
      });

    //  bottom 部分 阴影层 和 文字
      $('li').hover(function(){
            $(this).find('.ceng').stop().fadeIn(100);
          
          $(this).find('.text').stop().animate({
                   left:0
          })
      },function(){
          $(this).find('.ceng').stop().fadeOut(100);
          $(this).find('.text').stop().animate({
                  left:-190
              })
      })
</script>